<script setup>
import { computed } from "vue";

defineOptions({
  name: "Grid",
  type: 0,
  cname: "宫格",
  icon: "icon-gongge",
});

// 定义组件props
const props = defineProps({
  cols: {
    title: "数量",
    ctype: "number",
    type: Number,
    default: 2,
    validator: (value) => value >= 1 && value <= 6,
  },
  // 数据源数组
  list: {
    title: "宫格列表",
    ctype: "gridList",
    type: Array,
    default: () => [
      {
        id: 1,
        text: "项目1",
        url: [
          {
            url: "https://images.unsplash.com/photo-1426604966848-d7adac402bff?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80",
          },
        ],
      },
      {
        id: 2,
        text: "项目2",
        url: [
          {
            url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
          },
        ],
      },
      {
        id: 3,
        text: "项目3",
        url: [
          {
            url: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
          },
        ],
      },
      {
        id: 4,
        text: "项目4",
        url: [
          {
            url: "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
          },
        ],
      },
    ],
  },
});
</script>

<template>
  <!-- 动态设置列数 -->
  <div
    class="grid gap-4 mt-2"
    :style="{
      'grid-template-columns': `repeat(${props.cols}, minmax(0, 1fr))`,
    }"
  >
    <!-- 循环渲染数据项 -->
    <div
      v-for="item in list"
      :key="item.id"
      class="flex flex-col items-center justify-center p-4"
    >
      <div class="image-container mb-2 flex items-center justify-center">
        <el-image
          class="w-[60px] h-[60px]"
          :src="
            Array.isArray(item.url) && item.url.length > 0 && item.url[0].url
              ? item.url[0].url
              : ''
          "
          fit="cover"
        />
      </div>
      <span class="text-sm font-medium">{{ item.text }}</span>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.item {
  @apply bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
}

.image-container {
  width: 60px;
  height: 60px;

  img {
    width: 60px;
    height: 60px;
  }
}
</style>
